<template>
  <view class="loginIndex">
    <view class="loginIndex-header">
      <!-- <text>cxy个人网站</text> -->
      <text>金灯塔</text>
    </view>
    <view class="loginIndex-form">
      <uv-form :model="form" :rules="rules" ref="formRef" :labelStyle="labelStyle" >
        <uv-form-item label="" prop="mobile" borderBottom>
          <uv-input v-model="form.mobile"  placeholder="请输入电话" border="none" type="number"/>
        </uv-form-item>
      </uv-form>
      <view class="loginIndex-form-btn">
        <uv-button 
        :customStyle="btnCustomStyle"
        @click="submit"
        >登 录</uv-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {reactive} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {ref} from 'vue';
const formRef:any = ref(null)
const form = reactive({
  mobile: '',
});
const labelStyle = reactive({
  width: '0rpx',
  color: '#1B1A1D',
  fontSize: '32rpx',
  fontWeight: '500',
  lineHeight: '50rpx',
});
const btnCustomStyle = reactive({
  height: '100rpx',
  background: 'linear-gradient(45deg, #3c9cff, #8a2be2)',
  color: '#fff',
  borderRadius: '20rpx' ,//圆角
  fontSize: '32rpx',
  fontWeight: '500',
});
const rules = ref({
  mobile: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        // 此处业务逻辑省略
        // 返回true表校验通过，返回false表示不通过
        return uni.$uv.test.mobile(value)
      },
      message: '请输入正确的电话',
      trigger: 'blur',
    },
  ],
})
const submit = () => {
  try {
    formRef.value.validate().then((valid) => {
      if (valid) {
        uni.showToast({
          title: '登录成功',
          icon: 'none',
        });
        uni.navigateTo({
          url: '/page/home/home',
        })
      } else {
        console.log('error submit!!');
        return false;
      }
    })
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss">
.loginIndex{
  font-family: PingFangSC, PingFang SC;
  font-style: normal;
  &-header{
    font-weight: 500;
    font-size: 36rpx;
    color: #1B1A1D;
    line-height: 50rpx;
    margin-top: 438rpx;
    width: 100%;
    text-align: center;
  }
  &-form{
    padding: 24rpx;
    &-btn{
      margin-top: 60rpx;
    }
  }
}
</style>